<!-- 当前日期时间 -->
<template>
  <div class="now-date-time">
    <div>{{nowTime | time(format)}} {{todayWeek}}</div>
 </div>
</template>

<script>
export default {
  name: 'NowDateTime',
  props: { format: String },
  data() { 
    return {
        // 定时器对象
        timer: '',
        // 当前时间
        nowTime: new Date(),
        // 今天星期
        todayWeek: '',
    }
  },
  mounted() {
    const that = this;

    that.timer = setInterval(() => {
        that.nowTime = new Date();
        that.todayWeek = that.setWeek(that.nowTime);
    }, 1000);
  },
  methods:{
    /**
     * 设置时间星期
     * @param date 时间
     */
    setWeek(date) {
        let weekDay = [
            "星期天",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六"
        ];
        return weekDay[date.getDay()];
    },

  },
  destroyed() {
    // 在Vue实例销毁前，清除当前日期定时器
	if (this.timer) {
    	clearInterval(this.timer); 
    };
  }
 }
</script>

<style lang="less" scoped>
.now-date-time{
  font-weight: 500;
  color: #1890ff;
  font-size: 15px;
  // 颜色渐变
  background-image: linear-gradient(135deg, #1890ff, #f00);
  -webkit-background-clip: text;
  color: transparent;
}
</style>